<template>
      <h2>折扣券显示页面</h2>
    折扣券标题<input type="text" v-model="title"/>
    <input type="button" value="查询" @click="SelectData"/>
    <input type="button" value="添加" @click="addDiscount"/>
  <table border="1">
    <thead>
    <tr>
        <td>折扣券编号</td>
        <td>折扣券标题</td>
        <td>折扣券颜色</td>
        <td>库存数量</td>
        <td>每人限领</td>
        <td>使用条件</td>
        <td>折扣</td>
        <td>开始时间</td>
        <td>介绍时间</td>
        <td>门店名称</td>
        <td>操作</td>
    </tr>
   </thead>
   <tbody>
    <tr v-for="item in Discount" >
        <td>{{item.Discount_Id}}</td>
        <td>{{item.Discount_Title}}</td>
        <td>{{item.Discount_Color}}</td>
        <td>{{item.Discount_Num}}</td>
        <td>{{item.Discount_Limited}}</td>
        <td>{{item.Discount_Use}}</td>
        <td>{{item.Discount_Discount}}</td>
        <td>{{ item.Discount_StartTime }}</td>
        <td>{{item.Discount_EndTime}}</td>
        <td>{{item.Shop_Name}}</td>
        <td>
            <input type="button" value="删除" @click="delDiscount(item.Discount_Id)"/>
            <input type="button" value="修改" @click="editDiscount(item.Discount_Id)"/>
        </td>
    </tr>
   </tbody>
  </table>
共{{ page.count }}条数据,每页{{ page.size }}条数据，第{{ page.index }}/{{ page.pcount }}页
<a href="#" style="margin-right:10px" @click="pageClick('F')">首页</a>
<a href="#" style="margin-right:10px" @click="pageClick('P')">上一页</a>
<a href="#" style="margin-right:10px" @click="pageClick('N')">下一页</a>
<a href="#" style="margin-right:10px" @click="pageClick('E')">尾页</a>
<select v-model="csize" @change="ChangeSize">
    <option value="1">每页1条</option>
    <option value="2">每页2条</option>
    <option value="3">每页3条</option>
</select>
<input type="text" v-model="nindex" style="width:20px"/>
<input type="button" value="跳转" @click="jump"/>

</template>

<script setup lang="ts">
    import{ref,onMounted} from 'vue'
    import {useRouter} from 'vue-router'
    import axios from 'axios'
    const router=useRouter();
    const editDiscount=(did:number)=>{
       router.push({
            path:"/editDiscount",
            query:{
                did:did
            }
       })
    }


    const delDiscount=(did:number)=>{
       if(confirm('确定删除吗'))
       {
        axios.delete('https://localhost:44320/api/Discount/DiscountDel',
        {
            params:{
                did:did
            }
        })
        .then(res=>{
            if(res.data>0)
            {
                alert('删除成功');
                page.value.index=1;
                loadData();
            }
            else
            {
                alert('删除失败');
            }
        })
       }
    }


    const pageClick=(mes:string)=>{
        switch(mes){
            case 'F':page.value.index=1;break;
            case 'P':
                if(page.value.index>1)
                {
                    page.value.index--;
                }
                else
                {
                    alert('已经是第一页了');
                }
                break;
            case 'N':
                if(page.value.index<page.value.pcount)
                {
                    page.value.index++;
                }
                else
                {
                    alert("已经是最后一页了");
                }
                break;
            case 'E':page.value.index=page.value.pcount;break;
        }
        loadData();
    }
    const csize=ref(2);
    const ChangeSize=()=>{
        page.value.size=csize.value;
        page.value.index=1;
        loadData();
    }
    const nindex=ref("");
    const jump=()=>{
        if(nindex.value=="")
        {
            alert('请输入页码');
            return;
        }
        if(isNaN(Number(nindex.value)))
        {
            alert('请输入数字');
            return;
        }
        if(Number(nindex.value)>=1&&Number(nindex.value)<=page.value.pcount)
        {
            page.value.index=Number(nindex.value);
            loadData();
        }
    }
    const title=ref("");
    const page=ref({
        count:0,
        pcount:0,
        index:1,
        size:2
    })
    const Discount=ref([{
    "Discount_Id": 0,
    "Discount_Title": "",
    "Discount_Color": "",
    "Discount_Num": null,
    "Discount_Limited": null,
    "Discount_Use": "",
    "Discount_Discount": null,
    "Discount_StartTime": "",
    "Discount_EndTime": "",
    "Shop_Name": ""
  }])
    onMounted(()=>{
        loadData();
    })
    const loadData=()=>{
        axios.get('https://localhost:44320/api/Discount/SDiscount',{
            params:{
                index:page.value.index,
                size:page.value.size,
                title:title.value
            }
        })
        .then(res=>{
            Discount.value=res.data.pageList;
            page.value.count=res.data.count;
            page.value.pcount=res.data.pcount;
        })
    }
    const SelectData=()=>{
        page.value.index=1;
        loadData();
    }
    const addDiscount=()=>{
        router.push('/addDiscount');
    }

</script>